<template>
  <div>
    <!-- 1、使用A模块state的数据 -->
    <p>{{$store.state.moduleA.username}}</p>

    <!-- 2、使用A模块getters的数据 -->
    <p>{{$store.getters.newName}}</p>

    <!-- 1、使用B模块state的数据 -->
    <p>{{$store.state.moduleB.username}}</p>
     <!-- 2、使用B模块getters的数据 -->
    <p>{{$store.getters['moduleB/newName']}}</p>

    <button @click="actionFn">actionFn</button>
    <button @click="mutationFn">mutationFn</button>

  </div>
</template>

<script>
import { useStore } from 'vuex'
export default {
  setup () {
    const store = useStore()
    // 调用B模块的actions
    const actionFn = () => {
      // console.log('111')
      store.dispatch('moduleB/updateName')
    }
    // 调用B模块的mutations
    const mutationFn = () => {
      // console.log('111')
      store.commit('moduleB/updateName')
    }
    return { actionFn, mutationFn }
  }
}
</script>

<style>

</style>
